<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        float: left;
        margin-left: 50px;
        font-size: 20px;
      }
      .box1 {
        /* 惊现渐变 椭圆的长半径和短半径 是由盒子的宽和高决定的 */
        background-image: radial-gradient(red,yellow,green);
      }
      .box2 {
        /* 通过关键词决定椭圆的圆心*/
        background-image: radial-gradient(at top left,red,yellow,green);
      }
      .box3 {
        /* 通过像素值决定椭圆的圆心*/
        background-image: radial-gradient(at 100px 50px,red,yellow,green);
      }
      .box4{
        /*通过关键词将型形状调整为圆*/
        background-image: radial-gradient(circle,red,yellow,green);
      }
      .box5 {
        /*通过像素值调整圆的半径*/
        background-image: radial-gradient(100px 100px,red,yellow,green);
      }
      .box6 {
        /* 改变渐变的位置 */
        background-image: radial-gradient(red 50px,yellow 100px, green 150px);
      }
      .box7 {
        /* 综合*/
        background-image: radial-gradient(100px 200px at top left ,red 50px,yellow 100px ,green 150px);
      }
    </style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
</body>
</html>